<template>
  <div class="contioner">
      <!-- 左半部分 -->
        <div class="left">
          <div v-for="o in this.res" :key="o" class="text item box-card">
              <el-card>
                <div slot="header" class="clearfix">
                  <span><h2>{{o.title}}</h2></span>
                </div>
                <el-avatar shape="square" fit="contain" size="small" :src=o.avatorUrl></el-avatar> 
                <span style="line-height:25px;margin-left:5px;">{{o.userName}}：</span>
                <div v-html="o.text"></div>
                  <el-button style="float: left; padding: 10px 20px; margin: 12px 10px" type="primary"  @click="parise(o.id,$event)">{{o.praise}}</el-button>
                  <el-button style="float: left; padding: 10px 20px;margin: 12px 10px" type="primary" icon="el-icon-chat-line-square" @click="diss(o.id)">评论</el-button>
              </el-card>
            </div>
      </div>
      <!-- 抽屉 -->
      <el-drawer
        title="评论区"
        :visible.sync="drawer"
        :direction="direction"
        size="40%">
        <div class="dissArea">
          <!-- 评论内容开始 -->
          <div class="dissAreaText" v-for="o in this.disRes" :key="o">
            <el-avatar  style="" shape="square" fit="contain" size="small" :src=o.aratorUrl></el-avatar> 
            <span style="line-height:30px;margin-left:5px;">{{o.userName}}</span>
            <p style="margin-left:35px" class="diss">{{o.dissText}} 
              <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="reply(o.dissArticalId,o.dissEmail,o.dissId)">回复</el-button>
              <el-button type="danger" icon="el-icon-delete" v-show="o.dissEmail==userEmail" size="mini" plain @click="deleteDiss(o.dissArticalId,o.dissId)">删除</el-button>
            </p>  
            
            <div style="margin-top:20px" v-for="r in o.reply" :key="r">
                <el-avatar  style="margin-left:35px" shape="square" fit="contain" size="small" :src=r.replyAvatorUrl ></el-avatar> 
                <span style="line-height:30px;margin-left:5px;">{{r.replyName}} 回复 {{o.userName}}</span>
                <p style="margin-left:70px">{{r.replyText}}
                  <!-- <el-button type="primary" icon="el-icon-edit" @click="replyAgain()">回复</el-button> -->
                </p>
            </div>
            <el-divider></el-divider>
          </div>
          <!-- 评论内容结束 -->
        </div>
        <el-form inline="true" label-width="80px"  class="submitText">
          <el-form-item label="评论内容" style="width:70%">
            <el-input v-model="disscuss.dissText" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitDiss">立即发表</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <!-- 右半部分 -->
      <!-- src\assets\logo\shipin.png -->
      <div class="right">
        <el-card class="box-card daylyWork">
          <div class="cardStyle" @click="toWriter()">
            <svg class="workicon" aria-hidden="true">
                <use xlink:href="#iconwenzhang"></use>
            </svg>
            <span>写文章</span>
          </div>
          <div class="cardStyle" @click="toWriter()">
            <svg class="workicon" aria-hidden="true">
                <use xlink:href="#iconzhaopian"></use>
            </svg>
            <span>发照片</span>
          </div>
        </el-card>
        <!-- 数据浏览部分 -->
         <el-card class="dataWork">
          <div class="datacard">
            <span>点赞数: <span><b>{{praiseNum}}</b></span></span>
          </div>
        </el-card>
      </div>
  </div>
</template>

<script>
export default {
 data() {
    return {
      res:[],//获取文章的结果集
      pariseBtn:'点赞',//点赞按钮
      praiseNum: 0,//点赞数量
      readNum: 0,//阅读次数
      praiseStatus:false,//是否点赞
      disscuss:{  //前台发送评论内容
        dissText:'',//评论内容
        dissEmail:'',//评论用户的邮箱
        dissArticalId:'',//评论文章id
      },
      disRes:[],//后台获取评论的结果

      drawer:false,//评论抽屉是否显示
      direction:'rtl',//抽屉显示的位置
      replyBody:{   //前台发送回复内容
          replyArticalId:'',
          replyText:'',
          replyEmail:'',
          dissEmail:'',
          dissId:'',
      },
      userEmail:'',//存储用户名
      // 删除评论
      disscussBody:{
          id:'',
          dissArticalId:'',
      },
    }
  },
  created(){
    this.userEmail= window.sessionStorage.getItem('user')
    this.getAllArtical();
    this.getParise();
  },
  methods:{
    // 获取全部用户的动态
    async getAllArtical(){
          // 向服务器请求数据
          const s =window.sessionStorage.getItem("user");
          const {data:res} = await this.$axios.post("artical/findAllDyn?email="+s)//访问后台
          // console.log(res);
          this.res = res;
        },   
        // 获取该用户所有文章的点赞数量
    async getParise(){
          const s =window.sessionStorage.getItem("user");
          const {data:res} = await this.$axios.post("artical/getAllPraise?email="+s)//访问后台
          console.log(res)
          this.praiseNum =res;
        },  
       // 打开抽屉
    async diss(id) {
          this.drawer=!this.drawer;
          this.direction='rtl';//抽屉动态设置
          this.disscuss.dissEmail=window.sessionStorage.getItem("user");
          this.disscuss.dissArticalId=id;//将文章id封装到对象
          const dissArticalId =id;  //获取文章id
          const {data:res} = await this.$axios.get("artical/getArticleDiss?dissArticalId="+dissArticalId);//获取评论
          this.disRes =res;//将数据封装
          console.log(this.disRes);//打印评论数据检查正确性

        },
        // 点赞，取消赞功能
    async parise(id,event){
          // 未点赞时
            var el = event.currentTarget;
            const s =window.sessionStorage.getItem("user");
          if(el.innerText=='点赞'){
            const {data:res} = await this.$axios.get("artical/praise?articalId="+id+"&email="+s+"&praise="+el.innerText);
            if(res.status=='pOk'){
              this.$message.success('已成功点赞');
              el.innerText='已赞'
            }else{
              this.$message.error('点赞失败，请稍后重试');
            }
          }
          else{
            const {data:res} = await this.$axios.get("artical/praise?articalId="+id+"&email="+s+"&praise="+el.innerText);
            if(res.status=='cOk'){
              this.$message.success('已取消点赞');
              el.innerText='点赞'
            }else{
              this.$message.error('取消赞失败，请稍后重试');
            }
          }
        },
        //添加评论
    async submitDiss(){
            console.log(this.disscuss.dissText);
            const {data:res} = await this.$axios.post("artical/dissArticle",this.disscuss);//提交数据
            if(res=='ok'){
              this.$message.success('评论成功');
              this.disscuss.dissText='';
              this.diss(this.disscuss.dissArticalId);
              this.diss(this.disscuss.dissArticalId);
            }else{
              this.$message.error();('添加评论失败，请重试');
            }
        },
        // 回复评论
         reply(replyArticalId,dissEmail,dissId){
          this.replyBody.replyArticalId = replyArticalId;//文章的id
          this.replyBody.dissEmail = dissEmail;//评论的email
          this.replyBody.dissId =dissId;//评论内容的id
          this.replyBody.replyEmail = window.sessionStorage.getItem("user");//回复评论的email

          this.$prompt('请输入回复内容', '回复', {
          confirmButtonText: '回复',
          cancelButtonText: '取消',
        }).then(async ({ value }) => {
          this.replyBody.replyText = value;//回复内容
          console.log(this.replyBody);
          const {data:res} = await this.$axios.post("artical/addReply",this.replyBody);
          if(res=='ok'){
              this.$message({
              type: 'success',
              message: '你回复的内容是: ' + value
            });
            value='';//回复内容清空;
            this.diss(replyArticalId);
            this.diss(replyArticalId);
          }else{
            this.$message.error('回复失败，请重试');
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '取消回复'
          });       
        });
        },
        // 回复回复的回复
        replyAgain(){
            this.replyBody.replyArticalId = replyArticalId;
            this.replyBody.dissEmail = dissEmail;
            this.replyBody.dissId =dissId;
            // console.log(dissId,dissEmail,replyArticalId);
            this.replyBody.replyEmail = window.sessionStorage.getItem("user");

            this.$prompt('请输入回复内容', '回复', {
            confirmButtonText: '回复',
            cancelButtonText: '取消',
          }).then(async ({ value }) => {
            this.replyBody.replyText = value;//回复内容加入
            console.log(this.replyBody);
            const {data:res} = await this.$axios.post("artical/addReply",this.replyBody);
            if(res=='ok'){
                this.$message({
                type: 'success',
                message: '你回复的内容是: ' + value
              });
              value='';//回复内容清空;
            }else{
              this.$message.error('回复失败，请重试');
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '取消回复'
            });       
          });
        },
        // 跳转到编辑页面
        toWriter(){
          this.$router.push('/editor');
        },
        // 删除评论
         deleteDiss(dissArticalId,dissId) {
        this.$confirm('将要删除该评论以及其所有回复内容, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.disscussBody.id=dissId;
          this.disscussBody.dissArticalId=dissArticalId;
          const {data:res} = await this.$axios.post("artical/deleteDiss",this.disscussBody);
          if (res=='ok') {
            this.$message.success('已删除');
            this.diss(dissArticalId);
            this.diss(dissArticalId);
          }else{
            this.$message.error('删除失败请稍后重试');
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  }, 
}
</script>

<style lang="less" scoped>
.contioner{
    width: 100%;
    display: flex;
}
// 左半部分
.left{
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .box-card {
        margin-top: 0.5rem;
        width:80%;
  }
}
// 右半部分
.right{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .box-card {
        width:50%;
        margin-top: 0.5rem;
        margin-left: 0.5rem;
  }
}
// 写文章，视频，照片的部分
  .daylyWork{
      display: flex;
      flex-direction: row;
      justify-content: center;
      div:nth-child(2n+0){
        margin-left: 5px;
        margin-right: 5px;
      }
  }
  .cardStyle{
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 13px;
    text-align: center;
    align-items: center;
    cursor: pointer;
  }
  // 数据浏览部分
   .dataWork{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
  } 
    .datacard{
    width: 50%;
    display: flex;
    justify-content: center;
    height: 50px;
    font-size: 15px;
    align-items: center;
    cursor: pointer;
  }
// card暂用
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
// 提交评论
.submitText{
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: white;
}
.dissArea{
  margin-left: 2%;
  margin-top: -20px;
  width: 98%;
  height: 600px;
  // background-color: rgb(227, 253, 253);
  overflow-y: auto;
  overflow-x: hidden;
}
// .dissAreaText:last-child{
  // margin-bottom: 50%;
// }
.dissAreaText{
  // background-color: aquamarine;
  width: 100%;
}
.diss{
  // background-color: aqua;
  cursor: pointer;
}


</style>